﻿
@{
    ViewBag.Title = "用户管理";
}
<section class="layui-larry-box">
    <div class="larry-personal">
        <div class="layui-tab">
            <blockquote class="layui-elem-quote user_search">
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-normal userAdd_btn">添加前端用户</a>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-danger batchDel">批量删除</a>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-mid layui-word-aux">本页面刷新后除新添加的文章外所有操作无效，关闭页面所有数据重置</div>
                </div>
                <div class="layui-inline">
                    <span class="layui-form-mid">共有<span style="font-weight: bold">  @ViewBag.TotalCount </span>条数据</span>
                </div>
            </blockquote>

            <!-- 操作日志 -->
            <div class="layui-form user_list">
                <table class="layui-table">
                    <colgroup>
                        <col width="10%">
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th>
                                <input name="" lay-skin="primary" lay-filter="allChoose" id="allChoose" type="checkbox">
                                <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                    <i class="layui-icon"></i>
                                </div>
                            </th>
                            <th>用户名称</th>
                            <th>用户昵称</th>
                            <th>手机号</th>
                            <th>邮箱</th>
                            <th>头像</th>
                            <th>性别</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody class="user_content">

                    </tbody>
                </table>
                <div class="larry-table-page clearfix">
                    <div id="page" class="page"></div>
                </div>
            </div>

        </div>
    </div>

</section>

@section FooterScript{

    <script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>

    <script id="user_template" type="text/html">
        {{each users as user}}
        <tr>
            <td>
                <input name="checked" lay-skin="primary" lay-filter="choose" type="checkbox">
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
            </td>
            <td>{{ user.name }}</td>
            <td>{{ user.niceName }}</td>
            <td>{{ user.phoneNumber }}</td>
            <td>{{ user.email }}</td>
            <td><img src="http://static.amortal.top/{{ user.imgSrc }}?	
imageView2/2/w/200/h/200/interlace/1/q/100" style="height:40px;" /></td>
            <td>{{ user.gender?'男':'女' }}</td>

            <td>
                <a class="layui-btn layui-btn-mini user_edit" data-id="{{ user.id }}"><i class="iconfont icon-edit"></i> 编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-mini user_del" data-id="{{ user.id }}">
                    <i class="layui-icon"></i> 删除
                </a>
            </td>
        </tr>
        {{/each}}
    </script>

    <script type="text/javascript">
        var count = parseInt(Math.ceil( @ViewBag.TotalCount / 10));

        var $;

        var appConfig = {
            name: "user",    @*需要和页面名称对应*@
            title: "用户",    @*显示的名称*@
            addUrl: "/User/AddNew",   @*添加弹框的路径*@

            @*修改弹框的路径 这里不用写出具体id（和后台controller里的对应就行）的值，js会自动获取并拼成链接
            后台获取id是通过data-id="1" 属性获取的 ，所以需要在编辑上也加上 data-id="@@user.Id"*@
            editUrl: "/User/Edit?id=",
            $: "",
            layer: "",
            area: ['100%', '700px'],   //弹出层的宽高

            //批量删除Ajax
            batchDel: function (data) {     @*Array data 得到的是 需要删除的id*@
                $ = appConfig.$

                $.ajax({
                    url: "/User/BatchDel",
                    method: "post",
                    dataType: "json",
                    data: { "userIds": data },    @*data要删除的数组*@
                    traditional: true,//这里设置为true
                    success: function (res) {
                        if (res.status == "ok") {
                            appConfig.layer.msg("删除成功", {
                                icon: 1, time: 2000, end: function () {
                                    location.reload();
                                }
                            });



                        } else {
                            appConfig.layer.msg("删除失败", {
                                icon: 5, time: 2000, end: function () {
                                    location.reload();
                                }
                            });
                        }
                    },
                    error: function () {
                        appConfig.layer.msg("网络请求失败", {
                            icon: 5, time: 2000, end: function () {
                                location.reload();
                            }
                        });
                    }
                });


                //todo:在此处添加批量删除记录的ajax



            },
            del: function (data) {
                $ = appConfig.$

                $.ajax({
                    url: "/User/Delete/",
                    method: "post",
                    dataType: "json",
                    data: { "userId": data },
                    success: function (res) {
                        if (res.status == "ok") {
                            appConfig.layer.msg("删除成功", { icon: 1 });

                        } else {
                            appConfig.layer.msg("删除失败", { icon: 5 });
                        }
                    },
                    error: function () {
                        appConfig.layer.msg("删除失败", { icon: 5 });
                    }
                });

                //todo:在此处添加删除记录的ajax
            }
        };

        layui.use(['jquery', 'layer', 'element', 'laypage', 'form'], function () {
            window.jQuery = window.$ = layui.jquery;
            window.layer = layui.layer;
            var element = layui.element(),
                laypage = layui.laypage;
            var form = layui.form()
                , laytpl = layui.laytpl;


            function loadOrderData(curr) {
                var index = layer.msg('用户加载中，请稍候', { icon: 16, time: false, shade: 0.8 });
                $.ajax({
                    method: "post",
                    dataType: "json",
                    url: "/User/List",
                    data: { currentPage: curr },
                    success: function (res) {

                        if (res.status == "ok") {

                            var html = template("user_template", { users: res.data });

                            $(".user_content").html(html);
                            form.render('checkbox');
                            layer.close(index);

                        } else {
                            layer.msg(res.errorMsg, { icon: 5 });
                        }


                    },
                    error: function () {
                        layer.msg("网络请求失败", { icon: 5 });
                    }
                });
            }

            $(function () {
                loadOrderData(1);
            });

            laypage({
                cont: 'page',
                pages: count, //总页数

                groups: 5, //连续显示分页数

                jump: function (obj, first) {
                    //得到了当前页，用于向服务端请求对应数据
                    var curr = obj.curr; // 获取当前页数下标

                    if (!first) {
                        loadOrderData(curr);
                    }
                }
            });

        });
    </script>
}
